<template>
  <div :class="['vm-card-vertical', 'vm-panel']">
    <div class="card-img">
      <img :src="image_path" :data-source="download_url">
      <div class="control">
        <span class="edit">
          <a :href="download_url" :download="image_name"><i class="el-icon-download"/></a>
        </span>
        <span class="delete" @click="toDelete">
          <i class="el-icon-delete"/>
        </span>
      </div>
    </div>
    <div class="card-desc panel-body" style="padding-bottom: 5px">
      <h5>{{ type_name }}</h5>
      <el-row type="flex">
        <el-col :span="20">
          <p>{{ upload_time }}</p>
        </el-col>
        <el-col :span="2">
          <el-tooltip placement="bottom" effect="light" style="padding: 0">
            <div slot="content">
              <h5>name : </h5>{{ image_name }}
              <br/><br/>
              <h5>type : </h5>{{ type_name }}
              <br/><br/>
              <h5>size : </h5>{{ image_size }}
              <br/><br/>
              <h5>time : </h5>{{ upload_time }}
            </div>
            <el-button type="text">...</el-button>
          </el-tooltip>
        </el-col>
        <el-col :span="2">
          <el-dropdown size="small" @command="handleCommand" trigger="click">
            <span class="el-dropdown-link"><i class="el-icon-arrow-down el-icon--right"></i></span>
            <el-dropdown-menu slot="dropdown" style="width: 5%">
              <el-dropdown-item icon="el-icon-share" v-clipboard:copy="download_url" command="copy">
                copy link
              </el-dropdown-item>
              <el-dropdown-item command="move" icon="el-icon-files">
                move to
                <el-select filterable v-model="changeAlbumForm.select_album_id" placeholder="album" size="mini"
                           style="width: 100%"
                           @change="changeAlbum">
                  <el-option
                      v-for="item in albumList"
                      :key="item.album_id"
                      :label="item.type_name"
                      :value="item.album_id"
                  >
                  </el-option>
                </el-select>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </div>

  </div>
</template>
<script>

export default {
  name: 'VmCard',
  inject: ["reload"],
  props: {
    image_id: {
      type: Number,
      default: 0
    },
    image_name: {
      type: String,
      default: 'default'
    },
    type_name: {
      type: String,
      default: 'default'
    },
    image_path: {
      type: String,
      default: require('@/assets/logo.png')
    },
    upload_time: {
      type: String,
      default: '2000-02-22 00:00:00'
    },
    image_size: {
      type: String,
      default: '88.88K'
    },
    download_url: {
      type: String,
      default: '#'
    },
    albumList: {
      type: Array,
      default: () => [{
        album_id: '0',
        type_name: 'default'
      }]
    }
  },
  data: function () {
    return {
      imageInfo: '',
      changeAlbumForm: {
        select_album_id: '',
        image_id: 0
      }
    }
  },
  methods: {
    toDelete() {
      const _this = this
      this.axios.delete(_this.API.http_image + 'delete?id=' + _this.image_id).then(function (resp) {
            if (resp.data) {
              const respData = JSON.parse(JSON.stringify(resp.data))
              if (respData.code === 200) {
                _this.FUN.successMessage(_this, respData.message);
              } else {
                _this.FUN.errorMessage(_this, respData.message);
              }
            } else {
              return false;
            }
          }
      );
      this.reload()
    },
    getImgRequestPath(filePath, fileType) {
      let suffix = ''
      if (fileType === "small") {
        suffix = '?x-oss-process=image/resize,w_100'
      }
      return `${filePath}${suffix}`
    },
    handleCommand(command) {
      switch (command) {
        case 'move': {
          break
        }
        case 'copy': {
          this.FUN.successMessage(this, "Copied to clipboard")
          break
        }
        default: {
          break
        }
      }
    },
    changeAlbum() {
      this.changeAlbumForm.image_id = this.image_id
      console.log(this.changeAlbumForm)
      const _this = this;
      this.axios.post(_this.API.http_album + 'change_album', _this.changeAlbumForm).then(function (resp) {
            if (resp.data) {
              const respData = JSON.parse(JSON.stringify(resp.data))
              if (respData.code === 200) {
                _this.FUN.successMessage(_this, respData.message);
                _this.reload()
              } else {
                _this.FUN.errorMessage(_this, respData.message);
              }
            } else {
              return false;
            }
          }
      );
    }
  },
  created() {
    this.imageInfo = this.image_name + "<br>" + this.image_size
  }
}
</script>
